<template>
  <main>
    <div style="width: 90%; left: 50px; position: relative; top: 20px">
      <el-carousel :interval="3000" type="card" height="200px" pause-on-hover="true">
        <el-carousel-item v-for="item in bannerData" :key="item" class="el-carousel-item">
          <img :src="item.picUrl" alt="" class="carImg" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <h2 style="margin: 0 0 13px 10px">新歌推荐 ></h2>
    <div class="recommendSongDiv">
      <div
        v-for="item in songData"
        class="minDiv"
        @click="dblclick(item.id, item.name, item.picUrl)"
      >
        <img :src="item.picUrl" alt="" class="img" />
        <span class="name">
          {{ item.name.length > 10 ? item.name.slice(0, 12) + "..." : item.name }}</span
        >

        <div class="artist">
          <span v-for="i in item.artist" class="artistName" @click="toSingerPage(i.id)">
            {{ i.name + "     " }}
          </span>
        </div>
      </div>
    </div>

    <h2 style="margin: 0 0 17px 10px">歌单推荐 ></h2>
    <div class="songListDiv">
      <div v-for="item in songListData" class="minDiv">
        <img
          :src="item.picUrl"
          alt=""
          class="SonglistImg"
          @click="toSonglistContent(item.id)"
        />
        <img src="@/static/img/songListPlay.svg" class="songListPlayImg" />
        <span class="name"> {{ item.name }}</span>
      </div>
    </div>

    <h2 style="margin: 20px 0 17px 10px">推荐MV ></h2>
    <div class="MVDiv">
      <div v-for="item in MVData" class="minDiv">
        <img :src="item.picUrl" alt="" class="img" @click="toMVPlayPage(item.id)" />
        <span class="name">{{ item.name }}</span>
        <!-- <p class="" @click="toSingerPage(item.id)">{{ item.artist }}</p> -->
        <div>
          <span v-for="i in item.artist" class="artistName" @click="toSingerPage(i.id)">
            {{ i.name + "     " }}
          </span>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
import { storeToRefs } from "pinia";
import {
  recommendSongs,
  recommendSongList,
  recommendMV,
  getSongUrl,
} from "@/service/songs";
import { getBanner } from "@/service/banner";
import { storage } from "@/stores/storage";
import router from "../router";
import { getArtistNames } from "../utils/practicalFun";

export default defineComponent({
  mounted() {
    this.getBannerFun();
    this.getRecommendSongsFun();
    this.getRecommendSongListFun();
    this.getRecommendMVFun();
  },
  setup() {
    let store = storage();
    let bannerData = ref([]);
    let songData = ref([]);
    let songListData = ref([]);
    let MVData = ref([]);
    const loading1 = ref(true);
    const loading2 = ref(true);
    const loading3 = ref(true);
    const loading4 = ref(true);

    function getBannerFun() {
      getBanner()
        .then((res) => {
          let data = res.data.banners;
          for (let i = 0; i < data.length; i++) {
            bannerData.value[i] = {};
            bannerData.value[i].picUrl = data[i].pic;
          }
          loading1.value = false;
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
    }
    function getRecommendSongsFun() {
      recommendSongs()
        .then((res) => {
          let data = res.data.result;
          for (let i = 0; i < data.length; i++) {
            songData.value[i] = {};
            songData.value[i].id = data[i].id;
            songData.value[i].name = data[i].name;
            songData.value[i].picUrl = data[i].picUrl;
            songData.value[i].artist = getArtistNames(data[i].song.artists);
            songData.value[i].mvId = data[i].mvid;
          }
          loading2.value = false;
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
    }
    function getRecommendSongListFun() {
      recommendSongList()
        .then((res) => {
          let data = res.data.result;
          for (let i = 0; i < data.length; i++) {
            songListData.value[i] = {};
            songListData.value[i].name = data[i].name;
            songListData.value[i].id = data[i].id;
            songListData.value[i].picUrl = data[i].picUrl;
          }
          loading3.value = false;
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
    }
    function getRecommendMVFun() {
      recommendMV()
        .then((res) => {
          let data = res.data.result;
          for (let i = 0; i < data.length; i++) {
            MVData.value[i] = {};
            MVData.value[i].name = data[i].name;
            MVData.value[i].picUrl = data[i].picUrl;
            // MVData.value[i].artist = data[i].artistName;
            MVData.value[i].artist = getArtistNames(data[i].artists);
            MVData.value[i].id = data[i].id;
          }
          loading4.value = false;
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
    }
    function toMVPlayPage(id) {
      store.setMVId(id);
      router.push({
        path: "/mvplay",
      });
    }
    function toSingerPage(id) {
      store.setSingerId(id);
      router.push({
        path: "/singer",
      });
    }
    function toSonglistContent(id) {
      store.setSongListId(id);
      router.push({
        path: "/songListContent",
      });
    }
    async function dblclick(id, name, picUrl) {
      let songUrl = "";
      await getSongUrl(id)
        .then((res) => {
          songUrl = res.data.data[0].url;
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
      if (songUrl) {
        store.addSongPlayList(id, name, songUrl, picUrl);
        store.changeIsImmediatelyPlay();
      }
    }
    return {
      getBannerFun,
      getRecommendSongsFun,
      getRecommendSongListFun,
      getRecommendMVFun,
      toMVPlayPage,
      toSonglistContent,
      dblclick,
      toSingerPage,
      bannerData,
      songListData,
      songData,
      MVData,
      loading1,
      loading2,
      loading3,
      loading4,
    };
  },
});
</script>
<style scoped>
.el-carousel-item {
  border-radius: 10px;
}
.carImg {
  width: 450px;
  height: 200px;
  border-radius: 10px;
}
.recommendSongDiv {
  height: 330px;
}
.recommendSongDiv .minDiv {
  position: relative;
  float: left;
  width: 270px;
  height: 60px;
  margin: 5px 25px;
  border-radius: 10px;
  padding: 5px;
  overflow: hidden;
}

.recommendSongDiv .minDiv:hover {
  background: rgba(66, 70, 72, 0.1);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  border-radius: 10px;
  cursor: pointer;
}
.recommendSongDiv .minDiv .img {
  position: absolute;
  width: 60px;
  border-radius: 10px;
  height: 60px;
}
.recommendSongDiv .minDiv .name {
  position: relative;
  top: 5px;
  left: 65px;
}
.recommendSongDiv .minDiv .artist {
  width: 80px;
  height: 20px;
  position: absolute;
  white-space: nowrap;
  bottom: 10px;
  left: 70px;
}

.songListDiv {
  height: 430px;
  position: relative;
}
.songListDiv .minDiv {
  position: relative;
  width: 150px;
  height: 190px;
  margin: 15px 25px;
  float: left;
  border-radius: 10px;
  overflow: hidden;
}
.songListDiv .minDiv:hover .SonglistImg {
  cursor: pointer;

  transform: scale(0.9);
}
.songListDiv .minDiv .SonglistImg {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  transition: 1s;
}
.songListDiv .minDiv:hover .songListPlayImg {
  opacity: 1;
}
.songListPlayImg {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 10px;
  bottom: 50px;
  z-index: 2;
  opacity: 0;
  transition: 1s;
}
.songListDiv .minDiv .name {
  color: black;
}

.MVDiv {
  height: 230px;
}
.MVDiv .minDiv {
  width: 200px;
  height: 200px;
  margin: 10px 25px;
  float: left;
  border-radius: 10px;
}
.MVDiv .minDiv img {
  width: 200px;
  height: 120px;
  border-radius: 10px;
  transition: 0.5s;
}
.MVDiv .minDiv img:hover {
  transform: scale(0.9);
}
.MVDiv .minDiv .name {
  color: black;
}
.MVDiv .minDiv img:hover {
  cursor: pointer;
}
.artistName {
  white-space: pre;
}
.artistName:hover {
  color: orange;
  cursor: pointer;
}
</style>
